<template>
  <div class="w-1/3 mx-auto mt-40 shadow-2xl shadow-blue-300 rounded-box">
    <div class="avatar flex justify-center pt-4">
      <div class="w-24 rounded-full">
        <img
          src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
        />
      </div>
    </div>

    <div class="w-3/4 mx-auto">
      <label class="input input-bordered flex items-center gap-2 my-4">
        Name
        <input
          type="text"
          class="grow"
          value="Class 1 | Year 8"
          v-model="name"
        />
      </label>

      <select class="select select-bordered w-full mb-4" v-model="gender">
        <option disabled selected>Choose Gender</option>
        <option>Male</option>
        <option>Female</option>
      </select>
    </div>

    <div class="text-center">
      <button class="btn btn-primary my-2">Update Profile</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Alex');
const gender = ref('Male');
</script>
